<script setup lang="ts">
	import officeApi from '@/api/office/officeApi'

	import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets'
	import { UniverSheetsConditionalFormattingPreset } from '@univerjs/presets/preset-sheets-conditional-formatting'
	import sheetsConditionalFormattingZhCN from '@univerjs/presets/preset-sheets-conditional-formatting/locales/zh-CN'
	import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core'
	import sheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN'
	import { UniverSheetsDataValidationPreset } from '@univerjs/presets/preset-sheets-data-validation'
	import sheetsDataValidationZhCN from '@univerjs/presets/preset-sheets-data-validation/locales/zh-CN'
	import { UniverSheetsDrawingPreset } from '@univerjs/presets/preset-sheets-drawing'
	import sheetsDrawingZhCN from '@univerjs/presets/preset-sheets-drawing/locales/zh-CN'
	import { UniverSheetsFilterPreset } from '@univerjs/presets/preset-sheets-filter'
	import sheetsFilterZhCN from '@univerjs/presets/preset-sheets-filter/locales/zh-CN'
	import { UniverSheetsHyperLinkPreset } from '@univerjs/presets/preset-sheets-hyper-link'
	import sheetsHyperLinkZhCN from '@univerjs/presets/preset-sheets-hyper-link/locales/zh-CN'

	import '@univerjs/sheets-ui/lib/index.css'
	import '@univerjs/presets/lib/styles/preset-sheets-core.css'
	import '@univerjs/presets/lib/styles/preset-sheets-conditional-formatting.css'
	import '@univerjs/presets/lib/styles/preset-sheets-data-validation.css'
	import '@univerjs/presets/lib/styles/preset-sheets-drawing.css'
	import '@univerjs/presets/lib/styles/preset-sheets-filter.css'
	import '@univerjs/presets/lib/styles/preset-sheets-hyper-link.css'

	const props = defineProps(['officeId', 'id'])

	const container = ref()

	const univer = ref()

	const initUniver = () => {
		const { univerAPI } = createUniver({
			locale: LocaleType.EN_US,
			locales: {
				enUS: Tools.deepMerge({})
			},
			theme: defaultTheme,
			presets: [
				UniverSheetsCorePreset({
					container: container.value
				})
			]
		})
		univer.value = univerAPI
	}
	const queryData = async () => {
		let data = await officeApi.getContentByOfficeId({
			officeId: props.officeId
		})

		if (!data) {
			data = {}
		}
		if (!data.content) {
			return {}
		}
		return JSON.parse(data.content)
	}
	let workbook = null
	const initWork = async () => {
		const data = await queryData()
		workbook = univer.value.createUniverSheet(data)
	}

	onMounted(async () => {
		initUniver()
		await initWork()
	})
	const getValue = () => {
		const saveData = workbook.save()
		return saveData
	}

	const saveContent = () => {
		let data = getValue()
		officeApi.saveContent({
			officeId: props.officeId,
			content: JSON.stringify(data),
			fileTypeCode: 'xlsx'
		})
	}

	defineExpose({
		getValue
	})
</script>

<template>
	<div style="height: 100%">
		<div style="position: absolute; right: 0; z-index: 999">
			<a-button type="primary" @click="saveContent" v-if="props.id">保存</a-button>
		</div>
		<div ref="container" id="excelContainer" class="univer-container"></div>
	</div>
</template>

<style scoped>
	.univer-container {
		height: 100%;
	}
</style>
